<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>axios常用配置以及默认配置</title>
  </head>
  <body>
    <div><ul></ul></div>
    <button>战士</button>
    <button>法师</button>
    <!-- 
    接口: http://api.xiaohigh.com/lol  
    -->

    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
    <script>

      axios.defaults.baseURL = 'http://api.xiaohigh.com'

      let btns = document.querySelectorAll('button')
      let ulNode = document.querySelector('ul')
      btns[0].onclick = async ()=>{
       
          let response = await axios({
          url:'/lol',
          method:'get',
          params:{
            q : '战士'
          },
          headers:{
            name:'lol'
          }
        })
        console.log(response.data);
      
      let liNode = document.createElement('li');
      let imgNode = document.createElement('img')
      imgNode.src = response.data[0].poster
      liNode.appendChild(imgNode)
      ulNode.appendChild(liNode)

      }
      btns[1].onclick = async ()=>{
       try{
          let response = await axios({
          url:'/lol',
          method:'get',
          params:{
            q : '法师'
          },
          headers:{
            name:'lol'
          }
        })
        console.log(response);
       }catch(error){
         alert(error.message);
       }
      }
    </script>
  </body>
</html>
